<template>
    <div class="basic-upplier-container">
		<el-card shadow="hover">
            <el-button type="primary" icon="ele-Plus"> 新增考勤组 </el-button>
		</el-card> 
        <el-card class="full-table" shadow="hover" style="margin-top: 8px">
            <el-table  v-loading="state.groupListloading" :data="state.grouplist_Data">
                <!-- <el-table-column type="selection" width="55" />  -->
                <el-table-column prop="groupName" label="名称" width="150" />
                <el-table-column prop="memberCount" label="人数" width="80" />
                <el-table-column prop="type" label="类型" width="100" >
                    <template #default="scope">
                        <el-tag type="primary" v-if="scope.row.type ==='FIXED'"> 固定排班 </el-tag> 
                        <el-tag type="danger" v-if="scope.row.type ==='TURN'"> 轮班排班 </el-tag>
                        <el-tag type="success" v-if="scope.row.type ==='NONE'"> 无班次 </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="classesList[0]" label="考勤时间"/>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" text type="primary"> 编辑 </el-button>
                        <el-button size="small" text type="primary"> 删除 </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="turnRegular">
    import { onMounted, reactive, ref,defineAsyncComponent,nextTick } from 'vue';
    import { formatDate,frmatYear } from '/@/utils/formatTime';
    import { Timer, Close,Warning } from '@element-plus/icons-vue'
    import { auth } from '/@/utils/authFunction';

    // 引入组件
    const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
    const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
    const tableRef = ref<RefType>();

    import { ListAttendanceGroup } from '/@/api-services/api';

    const state = reactive({
        groupListloading:false,
        grouplist_Data:[],//考勤组列表
    });

    onMounted(async () => {
        state.groupListloading=true;
        loadListData();
    });
    const loadListData=()=>{
        ListAttendanceGroup({page:1,PageSize:10}).then((rlt)=>{
            state.groupListloading=false;
            state.grouplist_Data=rlt.data.result;
        })
    }

</script>